import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import areaData from '@/const/area'
import { Cascader } from 'ant-design-vue'

console.log(areaData)

@Component
export class AreaSelect extends Render {
    @Prop({default: true}) multiple?: boolean
    @Prop({default: []}) value?: string[]

    areaOption = areaData.labelAreaData

    selectValue = [] as string[]

    @Watch('value', { immediate: true, deep: true })
    handleWatchValue(val: string[]) {
        this.selectValue = val
    }

    @Emit('update:value')
    updateValue(val: string[]) {
        return val
    }

    onChange() {
        this.updateValue(this.selectValue)
    }
    render() {
        return (
            <Cascader
                options={this.areaOption}
                multiple={this.multiple}
                v-model:value={this.selectValue}
                onChange={this.onChange}
            ></Cascader>
        )
    }
}

export default toNative<{multiple?:boolean}, {}>(AreaSelect)
